<template>
  <div id="userList">
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="用户名">
                <span>{{ props.row.username }}</span>
              </el-form-item>
              <el-form-item label="昵称">
                <span>{{ props.row.nickname }}</span>
              </el-form-item>
              <el-form-item label="密码">
                <el-button @click="clickeditPwd(props.$index)" type="text"
                  >编辑密码</el-button
                >
              </el-form-item>
              <el-form-item label="邮箱">
                <span>{{ props.row.email }}</span>
              </el-form-item>
              <el-form-item label="性别">
                <span>{{ props.row.gender }}</span>
              </el-form-item>
              <el-form-item label="生日">
                <span>{{ props.row.birthday }}</span>
              </el-form-item>
              <el-form-item label="个人简介">
                <span>{{ props.row.info }}</span>
              </el-form-item>
              <el-form-item label="更新时间">
                <span>{{ props.row.updateTime }}</span>
              </el-form-item>
              <el-form-item label="用户头像URL">
                <el-button @click="showAvatar(props.$index)" type="text"
                  >查看</el-button
                >
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="用户ID" prop="id"> </el-table-column>
        <el-table-column label="用户名" prop="username"> </el-table-column>
        <el-table-column label="昵称" prop="nickname"> </el-table-column>
        <el-table-column label="注册时间" prop="createTime"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="userDelete">
              <el-button @click="deleteUser(scope.$index)" type="danger"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="editPwd">
      <el-dialog title="提示" :visible.sync="passwordedit" width="680px">
        <div class="inputNewPwd">
          <span>请输入新密码</span>
          <el-input
            v-model="newUserInfo.password"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="passwordedit = false">取 消</el-button>
          <el-button type="primary" @click="updatePwd()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="showAvatar">
      <el-dialog title="查看头像" :visible.sync="avatarVisible" width="562px">
        <!-- 头像 -->
        <img :src="avaUrl" alt="" />

        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="avatarVisible = false">取 消</el-button>
          <el-button type="primary" @click="avatarVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getAllUser, updateUser, deleteUser } from "@/api/admin.js";
export default {
  name: "userList",
  data() {
    return {
      tableData: [
        {
          id: "12987122",
          username: "用户名",
          password: "密码",
          avatar: "头像URL",
          nickname: "昵称",
          email: "邮箱",
          birthday: "生日",
          gender: "性别",
          info: "个人简介",
          createTime: "更新时间",
          updateTime: "更新时间",
        },
        {
          id: "12987122",
          username: "用户名",
          password: "密码",
          avatar: "头像URL",
          nickname: "昵称",
          email: "邮箱",
          birthday: "生日",
          gender: "性别",
          info: "个人简介",
          createTime: "更新时间",
          updateTime: "更新时间",
        },
        {
          id: "12987122",
          username: "用户名",
          password: "密码",
          avatar: "头像URL",
          nickname: "昵称",
          email: "邮箱",
          birthday: "生日",
          gender: "性别",
          info: "个人简介",
          createTime: "更新时间",
          updateTime: "更新时间",
        },
        {
          id: "12987122",
          username: "用户名",
          password: "密码",
          avatar: "头像URL",
          nickname: "昵称",
          email: "邮箱",
          birthday: "生日",
          gender: "性别",
          info: "个人简介",
          createTime: "更新时间",
          updateTime: "更新时间",
        },
      ],
      passwordedit: false,
      newUserInfo: {
        id: "12987122",
        username: "用户名",
        password: "密码",
        avatar: "头像URL",
        nickname: "昵称",
        email: "邮箱",
        birthday: "生日",
        gender: "性别",
        info: "个人简介",
        createTime: "更新时间",
        updateTime: "更新时间",
      },
      avatarVisible: false,
      avaUrl: "",
    };
  },
  methods: {
    // 获取所有用户信息
    getUserInfo: function () {
      getAllUser().then((res) => {
        this.tableData = res.data;
      });
    },
    // 点击修改密码按钮
    clickeditPwd: function (id) {
      this.newUserInfo = this.tableData[id];
      this.newUserInfo.password = "";
      this.passwordedit = true;
    },
    // 修改用户密码
    updatePwd: function () {
      updateUser(
        this.newUserInfo.id,
        this.newUserInfo.username,
        this.newUserInfo.password,
        this.newUserInfo.avatar,
        this.newUserInfo.nickname,
        this.newUserInfo.email,
        this.newUserInfo.birthday,
        this.newUserInfo.gender,
        this.newUserInfo.info
      ).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.passwordedit = false;
        } else {
          this.$message({
            message: "修改失败",
            type: "error",
          });
        }
      });
    },
    // 查看用户头像
    showAvatar: function (id) {
      this.avaUrl =
        "http://localhost:8888/api/upload/" + this.tableData[id].avatar;
      this.avatarVisible = true;
    },
    // 删除用户
    deleteUser: function (id) {
      deleteUser(this.tableData[id].id).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.tableData.splice(id, 1);
        } else {
          this.$message({
            message: "删除失败",
            type: "error",
          });
        }
      });
    },
  },
  mounted() {
    this.getUserInfo();
  },
};
</script>

<style lang="less" scoped>
#userList {
  .table {
    margin: 20px 0 0 20px;
    .demo-table-expand {
      font-size: 0;
      margin-left: 80px;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  }
  .editPwd {
    .inputNewPwd {
      display: flex;
      flex-direction: row;
      align-items: center;
      .el-input {
        width: 496px;
        margin-left: 10px;
      }
    }
  }
  // 查看用户头像弹窗
  .showAvatar {
    img {
      width: 506px;
    }
  }
}
</style>